import router, { asyncRoutes } from '@/router'
import store from '@/store'
// 虚拟进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 路由守卫
// 我知道的路由守卫有很多，常用的就是全局的路由守卫，beforeEach用的最多，还有 组件内的，路由独享的，等等很多钩子函数，但我记不住单词了，一般就是去vue-router官网看一下就可以写，很简单 ---- 吹牛
// 全局路由守卫beforeEach  afterEach， 全局钩子函数（在特定是时机，自动执行的函数）
// 组件内的钩子函数 beforeRouteEnter。 （代码就写在data methods 同级就可以了）
// 路由独享守卫 beforeEnter （代码写在路由 配置里面 和path componets 同级）

const whiteList = ['/login']
// 跳转到一个页面之前 执行的钩子函数  A --> B  A开始跳转，还没有到B
router.beforeEach(async(to, from, next) => {
  // to 去到什么页面, from 从什么页面跳转过来, next 路由放行的函数
  // nprogress.start()

  // 这里怎么判断有没有登录?
  if (store.state.user.token) {
    // 如果用户已经登录了, 用户手动输入 login去访问登录界面k
    if (whiteList.includes(to.path)) {
      next('/')
      // nprogress.done()
    } else {
      // 最终选择的是在这个else分支里面 发起 获取用户信息的请求的
      // const res = await getProfileRequest()
      // this.$store.commit(xxx, res.data)
      // 如果一个请求，返回的数据需要在vuex里面再保存以下，那么这个请求就需要在vuex的actions里面去发送，减少代码的复杂度
      // 这个else分支, 是每个路由切换的时候, 都会走到这里来, 如果直接写发请求, 就会浪费很多性能
      // 如果vuex里面已经存在了userInfo的信息, 我们就不要再发了
      // 判断是否为一个空对象
      // console.log(store)
      if (!store.getters.userId) {
      // if (Object.keys(store.state.user.userInfo).length === 0) {
        const res = await store.dispatch('user/setUserInfoAction')
        // console.log(res, 9898)
        // console.log(2, asyncRoutes)

        // 最后得到的是一个过滤之后的, 动态路由组成的数组
        const fileterRouters = asyncRoutes.filter(item => res.data?.roles?.menus.includes(item.name))
        // console.log(333, fileterRouters)

        store.commit('user/setRoutesMutations', [...fileterRouters, { path: '*', redirect: '/404', hidden: true }])
        router.addRoutes([...fileterRouters, { path: '*', redirect: '/404', hidden: true }])
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    // 这个if就是如果没有登陆过， 用户在访问 login页面， 或者 访问首页的情况
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 这里是访问其他页面的逻辑, 比如首页, 订单, 阻止页面等等,需要登录才能看的页面
      next('/login')
      nprogress.done()
    }
  }
})

// 跳转到一个页面之后执行的钩子函数 A --> B  已经到了B页面
router.afterEach(() => {
  // nprogress.done()
  // nprogress.set(0.5)
  // nprogress.inc()
})
